<template>
  <el-card>
    <div class="upload-file">
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="true"
        @click="clickUploadPanel"
        drag
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
     <!-- <div class="upload-btn">
        <el-button type="primary">上传</el-button>
     </div> -->
    </div>
  </el-card>
</template>

<script setup>
const getToken = () => {};

const importResults = ref({
  type: "warning",
  msg: "",
});

const upload = reactive({
  isUploading: false,
  headers: { Authorization: "Bearer " + getToken() },
  url: "/platform/import/importEmployeeRecordExcel",
});

const clickUploadPanel = () => {
  if (upload.isUploading) {
    proxy.$modal.alert("请选择要导入的类型");
  }
};
//文件上传中处理
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
  upload.isUploading = false;
  importResults.value = { ...response };
  if (response.code === 200) {
    importResults.value.type = "success";
  }
  if (response.code === 500) {
    importResults.value.type = "error";
  }
  proxy.$refs["uploadRef"].handleRemove(file);
};
const importTemplate = () => {};
</script>

<style scoped>
.upload-file {
  margin: 50px 30px;
}

.upload-btn {
    text-align: right;
}

</style>